<template>
  <div>
    <div v-if="value!==undefined && value.length">
      <ul v-for="item in value" :key="item[prop.name]">
        <li>{{item[prop.name]}}</li>
        <li>{{item[prop.sex]}}</li>
        <li>{{item[prop.age]}}</li>
      </ul>
    </div>
    <div v-else>暂无内容</div>
    <button @click="toParent">子对父</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      default: []
    },
    prop: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      arr: this.value
    };
  },
  // 监听的是data内部值，data的值只执行一遍，后面需要监听才能触发更新
  watch: {
    arr(nv) {
      return nv;
    }
  },
  methods: {
    toParent() {
      this.arr.push({ name: "李白", age: 19, sex: "男" });
      //  v-model，父组件绑定后，this.$emit会自动触发父组件值的变化
      this.$emit("input", this.arr);
    }
  }
};
</script>

<style>
</style>
